<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>简易富文本编辑器.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
<style type="text/css">
    #editor {width:800px;height:400px;border:1px solid #ccc;}
    button {margin:1px;border:1px solid #aaa;background:#ffe;cursor:pointer;overflow:hidden;}
    button:hover {background:#DEE0E2;border:1px solid #00f;}
</style>
  </head>
  
  <body>
  <button id="btn1"></button>
  <button id="btn2"></button>
  <button id="btn3"></button>
  <button id="btn4"></button>
  <button id="btn5"></button>
  <div id="editor">
      Click to Editor...
  </div>
  <input id="printContent" type="button" value="打印编辑器内容">
  <script type="text/javascript">
        initEditor();
        
        //初始化
        function initEditor() {
            openOrCloseEditor("editor", "true");//开启元素编辑
            bindBtnCommand();//给样式按钮绑定命令
        }
        
        /**
        * 
        * 功能： 开启元素编辑功能
        * 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭
        */
        function openOrCloseEditor(el, operate) {
            var editor = document.getElementById(el);
            editor.contentEditable = operate;
        }
        
        //按钮绑定命令
        function bindBtnCommand() {
            var btns = document.getElementsByTagName("button"),
                btnConfigs = "backcolor|#c8cbcf|设置背景色 bold|null|字体加粗 indent|null|缩进 fontName|微软雅黑|转换字体 italic|null|斜体".split(" "),
                len = btnConfigs.length;
            for(var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) {
                (function(btnConfig, btn) {
                    var msg = btnConfig.split("|"),
                        lab = msg[0],
                        value = msg[1],
                        title = msg[2];
                    btn.innerHTML = lab;
                    btn.title = title;
                    btn.onclick = function(e) {
                        document.execCommand(lab, false, value);
                    }
                })(btnConfig, btns[i]);
            }
        }

        //获取编辑器内嵌内容
        function getContent(el) {
            var editor = document.getElementById(el);
            return editor.innerHTML;
        }
        
        //打印按钮绑定触发事件
        document.getElementById("printContent").onclick = function(e) {
            var content = getContent("editor");
            document.write(content);
        };
    </script>
  </body>
</html>
